<template>
  <div class="major-events hideScrollBar">
    <!-- 导航 -->
    <NavBar :title="t('inviteFriends.jlmxTitle')" isFixed />
    <div class="contentview">
      <div
        v-if="!pageData.loading && pageData.list && pageData.list.length === 0"
        class="contentview-notdata items-center"
      >
        <img class="contentview-notdata-img" src="/image/notdate-icon.png" />
        <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
      </div>
      <ClientOnly v-else>
        <van-list
          v-model:loading="pageData.loading"
          :finished="pageData.finished"
          :finished-text="t('mvp.other.text4')"
          :loading-text="t('mvp.other.text11')"
          @load="onLoadList"
        >
          <div
            class="list-item items-center"
            v-for="(item, index) in pageData.list"
            :key="index"
          >
            <ImgNuxt
              class="list-item-left"
              :src="file.avatarDefault"
              :placeholder="file.avatarDefault"
              isHttp
            ></ImgNuxt>
            <div class="list-item-right items-center">
              <!-- 信息 -->
              <div class="list-item-right-info">
                <div class="list-item-title">{{ item.name }}</div>
                <div class="list-item-text">{{ item.taskName }}</div>
                <div class="list-item-time">{{ item.sendTimeStr }}</div>
              </div>
              <!-- bdc -->
              <div class="list-item-value">+{{ item.sendAmount }}BDC</div>
            </div>
          </div>
        </van-list>
      </ClientOnly>
    </div>
  </div>
</template>
<script setup name="module">
import { useDateFormat } from "@vueuse/core";
import { getMyPrizeRecord } from "@/api/inviteFriends";
import { switchTabBar, toThousands, getOssFileUrl } from "@/utils";

const { t } = useI18n();
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});
// 页面属性
const pageData = reactive({
  loading: false,
  finished: false,
  list: [],
  pageNum: 1,
  total: 0,
});
// 上啦加载
const onLoadList = () => {
  pageData.pageNum += 1;
  getListDataRequest((isAdd) => {
    if (!isAdd) {
      pageData.pageNum -= 1;
    }
  });
};

// 期数格式化
const formatWithTimeZone = (date, timeZone, locale) => {
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(date)));
  const month = monthFormatter.format(new Date(Number(date)));
  const day = dayFormatter.format(new Date(Number(date)));

  return `${year}.${month}.${day}`;
};
// 获取列表数据
const getListDataRequest = async (call) => {
  pageData.loading = true;
  const res = await getMyPrizeRecord({
    pageNum: pageData.pageNum,
    pageSize: 20,
  });
  pageData.loading = false;
  if (res) {
    let majorList = [];
    // console.log("--获取收益明细--", res);
    majorList = res.records.map((e, index) => {
      if (e.nickname) {
        if (e.nickname.length > 11) {
          e.name =
            e.nickname.substring(0, 11) +
            "..." +
            `(${(e.sid + "").substring(3, 100)})`;
        } else {
          e.name = e.nickname + `(${(e.sid + "").substring(3, 100)})`;
        }
      } else {
        e.name = "--";
      }

      // 2:注册并绑定手机 3:模拟平仓盈利 4:看直播 5:质押首充 6:好友成为大赢家
      if (e.taskType == 2) {
        e.taskName = t("inviteFriends.cjyyzc");
      } else if (e.taskType == 3) {
        e.taskName = t("inviteFriends.cjyymnpc");
      } else if (e.taskType == 4) {
        e.taskName = t("inviteFriends.cjyykzb");
      } else if (e.taskType == 5) {
        e.taskName = t("inviteFriends.cjyysc");
      } else if (e.taskType == 6) {
        e.taskName =
          t("inviteFriends.cjyydyj").split("xxxx.xx.xx")[0] +
          formatWithTimeZone(e.sessionTime, "Asia/Jakarta", "en-US") +
          t("inviteFriends.cjyydyj").split("xxxx.xx.xx")[1];
      }

      e.sendTimeStr = useDateFormat(
        Number(e.sendTime),
        "YYYY-MM-DD HH:mm:ss"
      ).value;

      return e;
    });

    pageData.list = pageData.list.concat(majorList);

    // pageData.total = res.total || 0;
    if (majorList.length == 0 && pageData.pageNum > 1) {
      pageData.finished = true;
    } else if (majorList.length < 20) {
      pageData.finished = true;
    }

    if (res.records && res.records.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  }
};

onMounted(() => {
  firebase?.logEvent("BDC_H5_inviteFriends_Detail_PUV");
  getListDataRequest();
});
</script>
<style lang="scss" scoped>
.list {
  &-item {
    margin: 0 15 * 2px;
    padding: 15 * 2px 0;
    border-bottom: 0.7px solid rgba(115, 119, 128, 0.15);
    &-left {
      width: 40 * 2px;
      height: 40 * 2px;
      border-radius: 100px;
      overflow: hidden;
      margin-right: 10 * 2px;
    }
    &-right {
      flex: 1;
      &-info {
        margin-right: 4 * 2px;
      }
    }
    &-value {
      flex: 1;
      text-align: right;
      color: #007bff;
      font-size: 15 * 2px;
      font-weight: 600;
    }
    &-title {
      color: #141924;
      font-size: 15 * 2px;
      font-weight: 510;
    }
    &-text {
      margin: 7 * 2px 0;
      color: #999da7;
      font-size: 14 * 2px;
      font-weight: 400;
    }
    &-time {
      color: #c2c5cc;
      font-size: 12 * 2px;
      font-weight: 400;
    }
  }
}
.major-events {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  .contentview {
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 200 * 2px;
        height: 200 * 2px;
        margin-bottom: 5px;
      }
      &-desc {
        margin-top: -30 * 2px;
        color: #999da7;
        font-size: 13 * 2px;
      }
    }
  }
}
</style>
